import { Layout, Menu, Breadcrumb, Spin, Icon } from 'antd';

const { Header, Content, Footer } = Layout;
import { connect } from "react-redux";

import { Banner } from "../../components/Banner";
import { List } from "../../components/List";
import { Nav } from "../../components/Nav";
import { homeInitAction } from "../../actionCreators/actions";

import { Head } from "../../components/Head";

import './index.less';
import { Foot } from "../../components/Footer";

const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />

class UI extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        this.props.homeInit();
    }

    render() {
        let { bannerList, goodsList } = this.props;
        // 热销推荐只显示前5个商品
        let list = goodsList.slice(0, 4);

        let domHome = bannerList.length == 0 ? (
            <div className="my-spin">
                <Spin indicator={antIcon} size="large" tip="正在拼命加载中 ... " />
            </div>
        ) : (
                <div>
                    <Nav {...this.props} />

                    <Content style={{ padding: '0 50px', marginTop: 64 }}>
                        <div style={{ background: '#fff', padding: 6 }}>
                            <Banner bannerList={bannerList} />
                        </div>
                    </Content>

                    <div className="recommend">
                        <div className="title">
                            <h3>热销书籍</h3>
                        </div>
                        < List goodsList={list} history={this.props.history} />
                    </div>
                    <Foot />
                </div>
            );

        return domHome;
    }
}

let mapStateToProps = ({ homeReducer }) => homeReducer;

let mapDispatchToProps = dispatch => {
    return {
        homeInit() {
            // getListAction是一个异步函数，用来获取ajax数据
            dispatch(homeInitAction);
        }
    }
}

export let Home = connect(mapStateToProps, mapDispatchToProps)(UI);